<template>
  <view>
    <q-empty v-if="!cartList.length" text="暂无记录"></q-empty>
    <view class="pa-3">
      <view class="">
        <uni-swipe-action ref="swipe">
          <view
            class="mb-2 bdrs-8 ov-h bg-cell"
            v-for="(it, i) in cartList"
            :key="it.id"
          >
            <uni-swipe-action-item :right-options="opts1" @click="onDel(it)">
              <view class="pa-2 pl-0" @click="onRow(it)">
                <view class="al-c">
                  <view class="px-3 py-4 hover-1" @click.stop="onCheck(it.id)">
                    <span
                      class="iconfont fz-22"
                      :class="
                        isChecked(it)
                          ? 'icon-checked color-1'
                          : 'icon-uncheck op-4'
                      "
                    ></span>
                  </view>

                  <q-img :src="it.cover" size="54" :radius="8"></q-img>
                  <view class="ml-3 flex-1">
                    <view class="fz-15 op-8 line-1">{{ it.name }}</view>
                    <view class="al-c mt-2">
                      <view class="red-1 fw-b">
                        <span class="fz-13">￥</span>
                        <span class="fz-15">{{ it.price }}</span>
                      </view>
                      <view class="ml-auto">
                        <q-num-box
                          :value="it.num"
                          :size="22"
                          @change="setCartNum(it, $event)"
                        ></q-num-box>
                      </view>
                    </view>
                  </view>
                </view>
              </view>
            </uni-swipe-action-item>
          </view>
        </uni-swipe-action>
      </view>
    </view>

    <view style="padding-top: 56px">
      <u-safe-bottom />
    </view>
    <view class="pos-btm pos-f z-100 bg-cell">
      <view class="al-c py-2 px-3">
        <view
          v-show="cartList.length"
          class="al-c"
          hover-class="op-8"
          @click="checkedAll = !checkedAll"
        >
          <span
            class="iconfont fz-22"
            :class="checkedAll ? 'icon-checked color-1' : 'icon-uncheck op-4'"
          ></span>
          <span class="ml-2 fz-13 op-8">全选</span>
        </view>

        <view class="ml-auto">
          <view class="d-flex al-end lh-1">
            <span class="op-5 fz-14">合计:</span>
            <span class="red-1 fz-13">￥</span>
            <span class="red-1 fz-20 fw-b">{{ totalPrice }}</span>
          </view>
          <!-- <view class="op-4 ta-r fz-13">免配送费</view> -->
        </view>
        <view class="ml-2" style="width: 100px">
          <u-button
            type="primary"
            :disabled="!checked.length"
            @click="$navTo('order/confirm')"
            >结算</u-button
          >
        </view>
      </view>
      <view style="height: 50px" v-if="inTab && $inH5"></view>
      <u-safe-bottom />
    </view>
  </view>
</template>

<script>
import { mapState } from "vuex";

export default {
  props: {
    inTab: Boolean,
  },
  computed: {
    ...mapState(["cartList", "cartChecked"]),
    totalPrice() {
      let price = 0;
      for (const id of this.checked) {
        const row = this.cartList.find((it) => it.id == id);
        price += row.price * row.num;
      }
      return price.toFixed(2);
    },
  },
  data() {
    return {
      checked: [],
      checkedAll: true,
      opts1: [
        {
          name: "remove",
          text: "删除",
          autoClose: true,
          style: {
            backgroundColor: "#f51",
          },
        },
      ],
    };
  },
  watch: {
    checked(val) {
      this.setChecked();
      this.$setStore({
        cartChecked: [...val],
      });
    },
    cartChecked(val) {
      if (val.join(",") == this.checked.join(",")) return;
      this.checked = [...val];
    },
    checkedAll(val) {
      const isAll = this.checked.length == this.cartList.length;
      if (!val) {
        if (isAll) this.checked = [];
      } else {
        if (!isAll) this.checked = this.cartList.map((it) => it.id);
      }
    },
  },
  created() {
    this.checked = [...this.cartChecked];
    this.setChecked();
  },
  methods: {
    isChecked(it) {
      return this.checked.includes(it.id);
    },
    onCheck(id, isAdd) {
      const idx = this.checked.indexOf(id);
      if ((isAdd && idx > -1) || (isAdd === false && idx == -1)) return;
      if (idx > -1) {
        this.checked.splice(idx, 1);
      } else {
        this.checked.push(id);
      }
    },
    onRow(it) {
      if (!this.inTab) {
        this.onCheck(it.id);
        return;
      }
      this.$navTo("goods", {
        id: it.id,
      });
    },
    setChecked() {
      this.checkedAll = this.checked.length == this.cartList.length;
    },
    closeSwipe() {
      this.$refs.swipe.closeAll();
    },
    onDel(it) {
      const list = [...this.cartList];
      const idx = list.findIndex((row) => row.id == it.id);
      list.splice(idx, 1);
      this.onCheck(it.id, false);
      this.$setStore({
        cartList: list,
      });
      // this.closeSwipe();
    },
    setCartNum(it, num) {
      const list = [...this.cartList];
      const idx = list.findIndex((row) => row.id == it.id);
      if (!num) {
        list.splice(idx, 1);
        this.onCheck(it.id, false);
      } else {
        list[idx] = {
          ...list[idx],
          num,
        };
        this.onCheck(it.id, true);
      }
      this.$setStore({
        cartList: list,
      });
    },
  },
};
</script>
